<template>
  <div style="margin-top: 10px;">
    <div class="card-wrap flex-column justify-end card-padding">
      <el-form :model="form" ref="formDig" :rules="type !== 'detail'?rules:{}" :label-position="type == 'detail' ? 'right' : 'top'" label-width="100px">
        <div class="card-title-wrap">
          <span>销账说明</span>
          <span></span>
        </div>
        <div :style="{marginLeft: (type == 'detail'?'':'50px')}" style="margin-left: 10px;">
          <el-form-item label="销账金额:">
            <span>{{ format_thousand(form.amount) }}</span>
          </el-form-item>
          <el-form-item label="说明:" prop="remark" style="width: 70%;">
            <el-input v-if="type !== 'detail'" type="textarea" placeholder="请输入说明内容" v-model="form.remark" maxlength="500" :rows="5" show-word-limit>
            </el-input>
            <span v-if="type == 'detail'">{{ form.remark }}</span>
          </el-form-item>
          <el-form-item label="附件:">
            <ImageCommon :disabled="type == 'detail'" :up-type="2" info="选择附件" :limit="5" v-model="form.attachments" ></ImageCommon>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  // 销账说明
  name: 'statementOfWriteOff',
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  data() {
    return {
      rules: {
        remark: [
          { required: true, message: "请输入说明", trigger: "change" },
        ]
      },
    };
  },
  created() {
    // this.form = this.value;
  },
  methods: {
    validate() {
      let flag = false;
      this.$refs["formDig"].validate((valid) => {
        if (valid) {
          flag = true;
        } else {
          flag = false;
        }
      });
      return flag
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
    font-size: 16px;
  }
}
</style>
